<script>

export default {
  name: "SchoolGroup",
  computed: {

  },
  data() {
    return {
      timeData:{},
    }
  },
  props: {
    time:{
      type: [Number,String],
      default: function () {
        return 0
      }
    },
    timeColor:{
      type: String,
      default: function () {
        return ''
      }
    },
    timeBgColor:{
      type: String,
      default: function () {
        return ''
      }
    },

    methods: {},
    onShow() {

    }
  },
  methods:{
    onChange(e,index) {
      this.timeData = e;
    }
  }
}
</script>

<template>
  <uv-count-down
      :time="parseInt(time)"
      format="DD:HH:mm:ss"
      autoStart
      millisecond
      @change="onChange($event)">
    <view class="time">
      <text class="time__item" :style="{
                color:timeColor,
                'background-color':timeBgColor

              }">{{timeData.days}}天
      </text>
      <text class="gutter">:</text>
      <text class="time__item"
            :style="{
                color:timeColor,
                'background-color':timeBgColor

              }"
      >{{ timeData.hours}}时
      </text>
      <text class="gutter">:</text>
      <text class="time__item"
            :style="{
                color:timeColor,
                'background-color':timeBgColor

              }">{{ timeData.minutes }}分
      </text>
      <text class="gutter">:</text>
      <text class="time__item"
            :style="{
                color:timeColor,
                'background-color':timeBgColor

              }">{{ timeData.seconds }}秒
      </text>
    </view>
  </uv-count-down>

</template>

<style scoped lang="scss">
.time {
  display: flex;
  flex-direction: row;
  align-items: center;

  .gutter {
    padding: 0 2px;
    font-size: 17px;
    //color: #606266;
  }

  &__item {
    text-align: center;
    padding: 4px;
    border-radius: 5px;
  }
}
.uni-countdown__number {
  font-size: 20px !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  align-items: center;
}
</style>
